<template>
  <div class="preview-container">
    <el-image
      style="width: 100%;"
      :src="fileList[currentIndex].url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="fileList.map(v => v.url)"
      show-progress
      :initial-index="4"
      fit="cover"
    />
    <div class="footer">
      <div class="preview-controller">
        <!-- 左侧箭头 -->
        <div class="arrow prev" :class="{ disabled: currentIndex === 0 }" @click="prevImage">
          <el-icon><ArrowLeft /></el-icon>
        </div>
        <!-- 缩略图展示区 -->
        <transition-group name="thumbnails" tag="div" class="thumbnail-container">
          <!-- 始终显示三张缩略图 -->
          <div
            v-for="(index) in visibleThumbnails"
            :key="fileList[index]?.id || index"
            class="thumbnail-wrapper"
            @click="setCurrentIndex(index)"
            :class="{
              'active': currentIndex === index,
              'left': isLeftDirection,
              'right': !isLeftDirection
            }"
          >
            <img
              v-if="fileList[index]"
              :src="fileList[index].url"
              class="thumbnail-img"
              :style="{
                opacity: currentIndex === index ? 1 : 0.7
              }"
            />
          </div>
        </transition-group>
        <!-- 右侧箭头 -->
        <div class="arrow next" :class="{ disabled: currentIndex === fileList.length - 1 }" @click="nextImage">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  fileList: {
    type: Array,
    default: () => [],
    required: true
  },
  currentIndex: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update:currentIndex'])

const isLeftDirection = ref(false)

// 计算显示的缩略图索引（最多三张）
const visibleThumbnails = computed(() => {
  const total = props.fileList.length;
  let startIdx = props.currentIndex - 1;
  // 处理边界情况
  if (props.currentIndex === 0) startIdx = 0;
  else if (props.currentIndex === total - 1) startIdx = Math.max(0, total - 3);
  return Array.from({ length: Math.min(3, total) }, (_, i) => startIdx + i);
});

// 图片切换方法
const prevImage = () => {
  if (props.currentIndex > 0) {
    isLeftDirection.value = true;
    emit('update:currentIndex', props.currentIndex - 1);
  }
};

const nextImage = () => {
  if (props.currentIndex < props.fileList.length - 1) {
    isLeftDirection.value = false;
    emit('update:currentIndex', props.currentIndex + 1);
  }
};

// 点击缩略图切换
const setCurrentIndex = (index) => {
  emit('update:currentIndex', index);
};

</script>

<style scoped lang="scss">
.preview-container {
  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    // 控制器
    .preview-controller {
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      // 箭头
      .arrow {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.1);
        &:hover {
          background-color: #a07936;
          .el-icon {
            color: #fff !important;
          }
        }
      }
      .arrow.disabled {
        opacity: 0.3;
        pointer-events: none;
      }
      // 缩略图容器
      .thumbnail-container {
        // width: 80%;
        display: flex;
        gap: 12px;
        margin: 0 16px;
        width: auto;       /* 改为自动宽度 */
        min-width: 80%;    /* 保留最小宽度 */
        flex-wrap: nowrap; /* 禁止换行 */
        overflow: hidden;  /* 隐藏溢出部分 */
        // 缩略图包装
        .thumbnail-wrapper {
          width: 100px;
          height: 100px;
          overflow: hidden;
          cursor: pointer;
          border: 2px solid transparent;
          flex: 0 0 100px; /* 固定宽度不伸缩 */
          transition: all 0.5s ease;
          // 缩略图样式
          .thumbnail-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s ease;
          }
        }
        // 缩略图选中边框
        .thumbnail-wrapper.active {
          border-color: #333;
        }
      }

    }
  }
}

/* 滑动动画 */
.thumbnails-enter-active,
.thumbnails-leave-active {
  transition: all 0.5s ease;
}

/* 向左滑动进入 */
.thumbnails-enter-from.left {
  transform: translateX(-100%);
}
/* 向右滑动进入 */
.thumbnails-enter-from.right {
  transform: translateX(100%);
}
.thumbnails-leave-to {
  opacity: 0;
}
/* 向左滑动离开 */
.thumbnails-leave-to.left {
  transform: translateX(100%);
}
/* 向右滑动离开 */
.thumbnails-leave-to.right {
  transform: translateX(-100%);
}

</style>